<template>
<div ref="uploadChart" :style="{width:width+'px',height:height+'px'}"></div>
</template>

<script setup>
import {getCurrentInstance,onMounted } from 'vue'
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  CalendarComponent,
  TooltipComponent,
  VisualMapComponent
} from 'echarts/components';
import { HeatmapChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

const currentInstance = getCurrentInstance()
const props = defineProps({
  width: Number,
  height: Number
})

echarts.use([
  TitleComponent,
  CalendarComponent,
  TooltipComponent,
  VisualMapComponent,
  HeatmapChart,
  CanvasRenderer
]);

const getVirtulData = (year) => {
  var date = +echarts.number.parseDate(year + '-01-01');
  var end = +echarts.number.parseDate(+year + 1 + '-01-01');
  var dayTime = 3600 * 24 * 1000;
  var data = [];
  for (var time = date; time < end; time += dayTime) {
    data.push([
      echarts.format.formatTime('yyyy-MM-dd', time),
      Math.floor(Math.random() * 100).toString()
    ]);
  }
  console.log(data);
  return data;
}
let data=getVirtulData('2022')
const option = {
  tooltip: {
  },
  visualMap: {
    min: 0,
    max: 100,
    type: 'piecewise',
    orient: 'horizontal',
    left: 'center',
    top: 10,
    inRange: {
      color: ['#fff', 'rgba(45, 181, 93, 0.5)', '#175B2F']
    }

  },
  calendar: {
    top: 40,
    left: 30,
    right: 30,
    cellSize: ['auto', 15],
    range: '2022',
    itemStyle: {
      borderWidth: 0.5
    },
    yearLabel: { show: true },
    monthLabel: {
      align: "center",
      nameMap: "ZH",
      height: 10,
      show: true,
      margin: 10,
      position: "end"
    }
  },
  series: {
    name: '提交次数',
    type: 'heatmap',
    coordinateSystem: 'calendar',
    data: data
  }
};
onMounted(()=>{
  var myChart = echarts.init(currentInstance.refs.uploadChart);
  option && myChart.setOption(option);
})

</script>

<style>

</style>